<template>
  <div>
    <!-- 首页轮播图 -->
      <mt-swipe :auto="4000" class="my-swipe">
        <mt-swipe-item v-for="(item,i) in getslideshowresult" :key="i">
          <img :src="item.img" alt="" width="100%" height="100%">
        </mt-swipe-item>
      </mt-swipe>
    <!-- 菜单导航 -->

      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newsList">
            <img src="../../images/menu1.png" alt="">
            <div class="mui-media-body">新闻资料</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../../images/menu2.png" alt="">
            <div class="mui-media-body">图片分享</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../../images/menu3.png" alt="">
            <div class="mui-media-body">商品购买</div>
          </a>
        </li>
         <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../../images/menu4.png" alt="">
            <div class="mui-media-body">留言反馈</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../../images/menu5.png" alt="">
            <div class="mui-media-body">视频专区</div>
          </a>
        </li>
        <<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../../images/menu6.png" alt="">
            <div class="mui-media-body">联系我们</div>
          </a>
        </li>
      </ul>

      
  </div>  
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      getslideshowresult: ""
    };
  },
  created() {
    // 调用 利用钩子函数
    this.getslideshow();
  },
  methods: {
    getslideshow() {
      this.$http({
        method: "get",
        url: "api/getlunbo"
      }).then(
        function(res) {
          console.log(res.body);
          if (res.body.status === 0) {
            this.getslideshowresult = res.body.message;
          }
        },
        res => {
          Toast("请求失败请刷新");
        }
      );
    }
  }
};
</script>
<style lang="less" scope>
.my-swipe {
  height: 220px;
  .mint-swipe-item {
    &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: green;
    }
    &:nth-child(3) {
      background-color: blue;
    }
  }
}

.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
  font-size: 12px;
}

.mint-swipe-indicator.is-active {
  background: #fff;
  opacity: 1;
}

.mui-content > .mui-table-view:first-child {
  margin-top: 0;
}

.mui-grid-view.mui-grid-9 {
  border-top: none;
  border-left: none;
  background-color: #fff;
  overflow: hidden;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border-right: none;
  border-bottom: none;
  overflow: hidden;
}
.mui-table-view-cell {
  img {
    width: 58px;
    height: 60px;
  }
}

body {
  background-color: #fff;
  overflow: hidden;
}
</style>